I'm trying to create a swatch type legend on my graph and following this reference. (https://observablehq.com/@d3/color-legend)

But when I apply the above code, the results on html look like this:

<div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; min-height: 33px; font: 10px sans-serif;">
  <style>

.${id}-item {
  break-inside: avoid;
  display: flex;
  align-items: center;
  padding-bottom: 1px;
}

.${id}-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - ${+swatchWidth}px - 0.5em);
}

.${id}-swatch {
  width: ${+swatchWidth}px;
  height: ${+swatchHeight}px;
  margin: 0 0.5em 0 0;
}

  </style>
  <div style="width: 100%"; columns: 300px">
    "[object Object], [object Object], [object Object], [object Object] "
  </div>
</div>

It should look like this on html:

<div ...>
  <style>
    ...
  </style>
  <div style="width: 100%; columns: 300px">
    <div class="-swatches-99bef5aa19961-swatch" style="background: rgb(31, 119, 180);"></div>
    <div class="-swatches-99bef5aa19961-label" title="title1">title1</div>
  </div>

I guess the clause about return inside of template literal statement though, don't even know what's the real problem and how to solve it.

Can anyone help solving this?